<template>
	<view class="scroll-wrap flex-wrap" @click.stop="handleStop">
		<scroll-view scroll-y="true" class="scroll-left">

			<view class="scroll-left-list">
				<view v-for="(item, index) in items" :class="['list-item', chonseIndex === index ? 'active' : '']"
					:key="index" @click="handleChange(index)">{{ item.name }}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="scroll-right">
			<view class="scroll-right-body">
				<slot name="content" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		watch,
		ref
	} from 'vue'
	const props = defineProps({
		items: {
			type: Array,
			default: () => []
		},
		modelValue: {
			type: Number,
			default: 0
		}
	});
	onMounted(() => {})
	const chonseIndex = ref('');
	const emit = defineEmits(['update:modelValue']);
	watch(() => props.modelValue, (newval) => {
		chonseIndex.value = newval
	}, {
		immediate: true
	})
	const handleStop = () => {};

	const handleChange = (val) => {
		chonseIndex.value = val;
		emit('update:modelValue', val);
	};
</script>

<style lang="scss" scoped>
	.scroll-wrap {
		height: 64vh;
	}

	.scroll-left {
		width: 160rpx;
		height: 64vh;
		background: #f7f8fa;
		text-align: left;
	}

	.list-item {
		font-size: 28rpx;
		padding: 24rpx 20rpx;

		&.active {
			position: relative;
			color: var(--color);
			background: #fff;

			&:after {
				position: absolute;
				top: calc(50% - 15rpx);
				left: 0;
				width: 8rpx;
				height: 30rpx;
				background-color: var(--color);
				content: "";
			}
		}
	}

	.scroll-right {
		width: 590rpx;
		height: 64vh;
		padding: 10rpx 30rpx;
		text-align: left;
	}
</style>